<template>
  <panel>
    <div class="tree">
      <div class="edit-tree-content">
        <el-tree :data="data2" :props="defaultProps" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent">
        </el-tree>
      </div>
      <div class="search-tree-content mt20">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>

        <el-tree class="filter-tree mt10" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree2">
        </el-tree>

      </div>
      <el-dialog title="新增节点" :visible.sync="addDialogVisible" :before-close="closeAddDialog">
        <el-form :model="newNodeObject" :rules="rules" ref="newNodeObject">
          <el-form-item label="节点名" prop="name" label-width="70px">
            <el-input v-model="newNodeObject.name" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeAddDialog">取 消</el-button>
          <el-button type="primary" @click="addNode('newNodeObject')">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="删除节点" :visible.sync="delDialogVisible" size="tiny" :before-close="closeDelDialog">
        <span>是否删除节点</span>
        <span slot="footer" class="dialog-footer">
                <el-button @click="closeDelDialog">取 消</el-button>
                <el-button type="primary" @click="delNode()">确 定</el-button>
            </span>
      </el-dialog>
    </div>
  </panel>
</template>

<script>
let id = 1000;

import {list2tree} from '@/utils/treeUtils';

export default {
    watch: {
        filterText(value) {
            this.$refs.tree2.filter(value);
        }
    },
    data() {
        return {
            newNodeObject: {            //待添加节点对象
                store: null,
                data: null,
                name: ''
            },
            addDialogVisible: false,    //添加节点对话框显示
            delNodeObject: {            //待删除节点对象
                store: null,
                data: null
            },
            delDialogVisible: false,    //删除节点对话框显示
            rules: {                    //表单校验规则
                name: [
                    { required: true, message: '请输入节点名', trigger: 'blur' }
                ]
            },
            filterText: '',             //过滤值
            data2: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    created(){
      const list = [
        {id: 1, label: '一级 1',parentId:null},
        {id: 2, label: '一级 2',parentId:null},
        {id: 3, label: '一级 3',parentId:null},
        {id: 4, label: '一级 4',parentId:null},
        {id: 5, label: '一级 5',parentId:null},
        {id: 6, label: '二级 1 1',parentId:1},
        {id: 7, label: '二级 1 2',parentId:1},
        {id: 8, label: '二级 2 1',parentId:2},
        {id: 9, label: '二级 2 2',parentId:2},
      ]
      this.data2 = list2tree(list);
    },
    methods: {
        /**
         * 重置newNodeObject
         */
        resetNewNodeObject() {
            this.newNodeObject.store = null;
            this.newNodeObject.data = null;
            this.newNodeObject.name = '';
        },

        /**
         * 重置delNodeObject
         */
        resetDelNodeObject() {
            this.delNodeObject.store = null;
        },

        /**
         * 添加节点事件
         */
        append(store, data) {
            this.newNodeObject.store = store;
            this.newNodeObject.data = data;
            this.addDialogVisible = true;
        },

        /**
         * 移除节点事件
         */
        remove(store, data) {
            this.delNodeObject.store = store;
            this.delNodeObject.data = data;
            this.delDialogVisible = true;
        },

        /**
         * 树结点内渲染函数
         */
        renderContent(h, { node, data, store }) {
            return (
                <span>
                    <span>
                        <span>{node.label}</span>
                    </span>
                    <span class="btn-box">
                        <el-button class="add" size="mini" onClick={() => this.append(store, data)}>+</el-button>
                        <el-button class="reduce" size="mini" onClick={() => this.remove(store, data)}>-</el-button>
                    </span>
                </span>);
        },

        /**
         * 节点过滤方法
         */
        filterNode(value, data) {
            if (!value)
                return true;
            return data.label.indexOf(value) !== -1;
        },

        /**
         * 添加节点
         */
        addNode(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.newNodeObject.store.append({ id: id++, label: this.newNodeObject.name, children: [] }, this.newNodeObject.data);
                    this.addDialogVisible = false;
                    this.resetNewNodeObject();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },

        /**
         * 关闭添加节点对话框
         */
        closeAddDialog() {
            this.addDialogVisible = false;
            this.resetNewNodeObject();
        },

        /**
         * 删除节点
         */
        delNode() {
            this.delNodeObject.store.remove(this.delNodeObject.data);
            this.delDialogVisible = false;
            this.resetDelNodeObject();
        },

        /**
         * 关闭删除对话框
         */
        closeDelDialog() {
            this.delDialogVisible = false;
            this.resetDelNodeObject();
        }
    }
};
</script>

<style lang="scss">
.tree {
    .edit-tree-content {
        .btn-box {
            float: right;
            margin-right: 20px;

            .add,
            .reduce {
                width: 22px;
            }
        }
    }

    .search-tree-content {}
}
</style>
